<script setup>
import Card from '@/views/new-screen/components/card.vue'
import { ref, watch } from 'vue'
import { useSide } from '@/store/side.js'
import {
  fetchCameraDeviceList,
  fetchYsyCameraDeviceList,
} from '@/api/manager/dataManage/deviceManage.js'
import { ElMessage } from 'element-plus'
import VideoItem from '@/views/new-screen/area-info/right/video-item.vue'

const sideStore = useSide()

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

const players = []
const loadingStatus = ref({})

const getDataList = async (areaId) => {
  if (!areaId) return []
  let data = []
  const ysRes = await fetchYsyCameraDeviceList({
    areaId: areaId,
    pageSize: 999,
    parkId: props.activePark,
  })
  const res = await fetchCameraDeviceList({
    areaId: areaId,
    pageSize: 999,
    parkId: props.activePark,
  })
  if (res.success) {
    // console.log(res.data)
    data = ysRes.data.list.concat(res.data.list)
    return (
      data.map((item) => {
        return {
          name: item.nickName,
          id: item.pkid,
          isWarn: false,
          warn: '',
          hls: item.hls ? item.hls : '',
        }
      }) || []
    )
  } else {
    ElMessage.error(res.message)
    return []
  }
}

const selectItem = ref([])
const activeVideoId = ref('')

watch(
  () => sideStore.areaPkid,
  async (val) => {
    activeVideoId.value = ''
    if (val) {
      selectItem.value = await getDataList(val)
    }
  },
)

const handleChangeVideo = (id) => {
  activeVideoId.value = id
}
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card class="area-warn" name="区域详情">
      <template #title>
        <i class="title-icon"></i>
      </template>

      <el-scrollbar>
        <div class="keynote-area-list-item-content">
          <video-item
            v-for="(item, index) in selectItem"
            :key="item.id"
            :item="item"
            :active-id="activeVideoId"
            @click="handleChangeVideo(item.id)"
          />
          <!--          <div-->
          <!--            v-for="(i, idx) in selectItem"-->
          <!--            :key="idx"-->
          <!--            class="keynote-area-list-item-content-img"-->
          <!--          >-->
          <!--            &lt;!&ndash;            <img&ndash;&gt;-->
          <!--            &lt;!&ndash;              v-if="i.isWarn"&ndash;&gt;-->
          <!--            &lt;!&ndash;              class="warn-img"&ndash;&gt;-->
          <!--            &lt;!&ndash;              src="../../../../assets/imgs/ic_bj_area.png"&ndash;&gt;-->
          <!--            &lt;!&ndash;            />&ndash;&gt;-->
          <!--            &lt;!&ndash;            <img v-if="i.isWarn" :src="i.warn" class="warn" />&ndash;&gt;-->
          <!--            <div-->
          <!--              v-loading="getLoading(i.id)"-->
          <!--              :id="'live-video' + i.id"-->
          <!--              class="video-wrapper"-->
          <!--              style="width: 100%; height: 100%"-->
          <!--            >-->
          <!--              &lt;!&ndash; <img style="width: 100%; height: 100%" :src="azImg2" /> &ndash;&gt;-->
          <!--            </div>-->
          <!--            <div v-if="i.isWarn" class="warn-black"></div>-->
          <!--            <div class="name"><span class="point"></span>{{ i.name }}</div>-->
          <!--          </div>-->
        </div>
      </el-scrollbar>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  height: calc(100% - var(--card-margin-bottom));

  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-warn {
    height: 100%;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 162px;
      background-image: url('@/assets/imgs/zdgz_title.png');
      background-size: 65%;
      background-position: left;
    }

    :deep(.title-area) {
      margin-bottom: 0;
    }

    &-title {
      height: 95px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/img_wybj.png');
      padding-left: 113px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 30px;

      .name {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .right-nums {
        display: flex;

        .right-num {
          width: 30px;
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url('@/assets/imgs/img_sz_area.png');
          font-family: DINPro;
          font-weight: 500;
          font-size: 23px;
          color: #fff3e1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 6px;
        }

        span {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 12px;
          color: #c4eaff;
          margin-top: 18px;
        }
      }
    }
  }

  .keynote-area-list-item-content {
    display: flex;
    flex-wrap: wrap;
    height: 328px;
    justify-content: space-between;
  }
}
</style>
